<template>
  <div class="l-page">
    <van-swipe :height="248" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in mlist" :key="index">
        <van-image height="248" fit="cover" :src="image.fileUrl" />
      </van-swipe-item>
    </van-swipe>
    <div class="m-card">
      <p class="g-c--gray g-fs--12 p-title-sub g-ta--c">
        <span># 约店·消费码 #</span>
        <span>温馨提示：记得及时查收短信通知哦~</span>
      </p>
      <p class="p-title g-ta--c">
        - 凭消费码，享
        <b class="g-c--orange g-fs--24">{{ shopInfo.discountsRate }}%</b>
        现金返现 -
      </p>
      <p class="g-fs--12 g-mt--10 p-text g-ta--l">
        <span class="g-c--orange ">领取 -</span>
        页面底部填写您的识别信息，点击“确认”即获得；
      </p>
      <div>
        <van-tag type="warning" class="g-mr--10">均</van-tag>
        <van-tag type="warning"
          >注：平均返现 {{ shopInfo.cashback }} 元</van-tag
        >
      </div>
      <div class="g-d--flex p-btn-wrap">
        <p class="g-fs--14">注：本链接额度有限，领完即止！</p>
        <van-button @click="scrollToDown" type="warning">立即领取</van-button>
      </div>
      <van-divider dashed></van-divider>
      <div class="m-shop">
        <div class="m-shop__left">
          <p class="g-fs--16 g-fw--600">{{ shopInfo.fullName }}</p>
          <p class="g-fs--12 g-c--gray">
            {{ shopInfo.address }}
          </p>
          <van-rate v-model="star_value" readonly />
        </div>
        <div class="m-shop__right">
          <div class="m-shop__img">
            <img :src="shopInfo.faceUrl" alt="" srcset="" />
          </div>
          <p class="g-fs--12 g-c--gray">
            {{ shopInfo.brokerageRate }}人倾力推荐
          </p>
        </div>
      </div>
    </div>
    <div class="m-banner">
      <img src="~@/assets/images/v2_pq5xo2.jpg" alt="" srcset="" />
    </div>
    <div class="m-card m-card--radius">
      <div class="m-card__title">商家服务</div>
      <p class="g-fs--12 g-mb--5 g-c--gray">
        {{ shopInfo.businessCategoryNames }}
      </p>
      <p class="g-fs--12 g-mb--5 g-c--gray">{{ shopInfo.discounts }}</p>
      <p class="g-fs--12 g-mb--5 g-c--gray">
        {{ shopInfo.businessWeek }}{{ shopInfo.businessHour }}
      </p>
      <div class="m-icon-list">
        <div
          class="m-icon__item"
          v-for="(item, index) of icon_arr"
          :key="index"
        >
          <img :src="icon_list[item]" alt="" srcset="" />
        </div>
      </div>
      <van-divider dashed></van-divider>
      <div class="g-d--flex align-items-baseline g-mb--10">
        <p class="g-fs--24 g-fw--600 g-mr--20 " style="color:#F96C65;">
          我要领取
        </p>
        <p class="g-fs--14 g-c--gray">消费码将通过短信发送给您哦~</p>
      </div>
      <van-cell-group>
        <van-field
          v-model="form.nikeName"
          required
          clearable
          label="您的称呼"
          placeholder="请输入您的称呼，例如，黄"
        />
        <van-radio-group v-model="form.sex">
          <van-cell title="先生" clickable @click="form.sex = '1'">
            <van-radio slot="right-icon" name="1" />
          </van-cell>
          <van-cell title="女士" clickable @click="form.sex = '2'">
            <van-radio slot="right-icon" name="2" />
          </van-cell>
        </van-radio-group>
        <van-field
          v-model="form.mobile"
          required
          clearable
          label="联系方式"
          placeholder="请输入您的手机号"
          type="tel"
        />
        <van-cell
          title="选择日期"
          is-link
          :value="form.date"
          @click="showDatePopup"
        />
        <van-cell
          title="选择时间"
          is-link
          :value="form.time"
          @click="showTimePopup"
        />
      </van-cell-group>
      <van-button
        class="g-mt--10"
        type="warning"
        size="large"
        @click="addPushUser"
        >确认并发送至商家</van-button
      >
    </div>
    <van-popup v-model="date_show" position="bottom">
      <van-datetime-picker
        v-model="current_date"
        type="date"
        :min-date="new Date()"
        :max-date="toDate('2019-12-12')"
        @confirm="currentDate('date')"
        @cancel="cancelDate"
    /></van-popup>
    <van-popup v-model="time_show" position="bottom">
      <van-datetime-picker
        v-model="current_time"
        type="time"
        :filter="filterTime"
        @confirm="currentDate('time')"
        @cancel="cancelDate"
    /></van-popup>
  </div>
</template>

<script>
import moment from "moment";
import { shareModel } from "@/api";
export default {
  name: "Share",
  data() {
    return {
      mlist: null,
      menuList: null,
      shopInfo: { levelStar: null },
      // star_value: 3,
      icon_list: {
        0: require("@/assets/images/icon/0.png"),
        1: require("@/assets/images/icon/1.png"),
        2: require("@/assets/images/icon/2.png"),
        3: require("@/assets/images/icon/3.png"),
        4: require("@/assets/images/icon/4.png"),
        5: require("@/assets/images/icon/5.png"),
        6: require("@/assets/images/icon/6.png"),
        7: require("@/assets/images/icon/7.png"),
        8: require("@/assets/images/icon/8.png"),
        9: require("@/assets/images/icon/9.png"),
        10: require("@/assets/images/icon/10.png"),
        11: require("@/assets/images/icon/11.png"),
        12: require("@/assets/images/icon/12.png"),
        13: require("@/assets/images/icon/13.png"),
        14: require("@/assets/images/icon/14.png"),
        15: require("@/assets/images/icon/15.png"),
        16: require("@/assets/images/icon/16.png"),
        17: require("@/assets/images/icon/17.png"),
        18: require("@/assets/images/icon/18.png"),
        19: require("@/assets/images/icon/19.png")
      },
      form: {
        shopId: null,
        shareId: null,
        nikeName: null,
        sex: "1",
        mobile: null,
        date: this.returnDate(new Date()),
        time: "12:00",
        type: 1
      },
      date_show: false,
      current_date: new Date(),
      time_show: false,
      current_time: "12:00"
    };
  },
  computed: {
    star_value() {
      let num = 0;
      if (this.shopInfo && this.shopInfo.levelStar) {
        num = Number(this.shopInfo.levelStar || 0);
      }
      return num;
    },
    icon_arr() {
      let arr = [];
      if (this.shopInfo && this.shopInfo.supporting) {
        arr = this.shopInfo.supporting.split(",");
        arr = arr.map(item => {
          item = Number(item);
          return item;
        });
      }
      return arr;
    }
  },
  created() {
    const { share_id } = this.$route.params;
    this.form.shareId = share_id;
  },
  async mounted() {
    const {
      result: { menuList, mlist, shopInfo }
    } = await shareModel._getShare({
      share_id: "98281013301488284"
    });
    const { id } = shopInfo;
    this.form.shopId = id;
    this.mlist = mlist;
    this.menuList = menuList;
    this.shopInfo = shopInfo;
  },
  methods: {
    toDate(date) {
      return moment(date).toDate();
    },
    returnDate(date, type = "YYYY-MM-DD") {
      return moment(date).format(type);
    },
    showDatePopup() {
      this.date_show = true;
    },
    currentDate(type) {
      let format_txt = null;
      switch (type) {
        case "date":
          format_txt = "YYYY-MM-DD";
          this.date_show = false;
          this.form[type] = this.returnDate(
            this[`current_${type}`],
            format_txt
          );
          break;
        case "time":
          format_txt = "HH:mm";
          this.time_show = false;
          this.form[type] = this[`current_${type}`];
          break;
        default:
          break;
      }
    },
    cancelDate() {
      this.date_show = false;
      this.time_show = false;
    },
    showTimePopup() {
      this.time_show = true;
    },
    filterTime(type, options) {
      if (type === "minute") {
        return options.filter(option => option % 15 === 0);
      }

      return options;
    },
    async addPushUser() {
      const {
        date,
        mobile,
        nikeName,
        sex,
        shareId,
        shopId,
        time,
        type
      } = this.form;
      const {
        content = null,
        state: { code }
      } = await shareModel._addPushUser({
        orderDate: date,
        mobile,
        nikeName,
        sex: Number(sex),
        shareId,
        shopId,
        reachTime: time,
        type
      });
      if (code === 0) {
        this.$dialog.alert({
          title: "发送成功",
          message:
            "当前手机顾客，将收到消费码短信通知，请注意查收！\n消费结账后，别忘记出示您的消费码以获取现金返现哦~"
        });
      } else {
        this.$toast.fail(content);
      }
    },
    scrollToDown() {
      var t = document.body.clientHeight;
      window.scroll({ top: t, left: 0, behavior: "smooth" });
      this.$toast("请填写信息吧");
    }
  }
};
</script>

<style lang="scss" scoped>
.l-page {
  background-color: #f5f5f5;
}
.m-card {
  box-sizing: border-box;
  width: 355px;
  margin: 0 auto;
  color: #101010;
  background-color: #fff;
  border-radius: 5px;
  margin-top: -28px;
  position: relative;
  z-index: 99;
  padding: 10px;
  &.m-card--radius {
    margin: 10px 0;
    width: 100%;
  }
}
.p-title-sub {
  display: flex;
  justify-content: space-around;
  line-height: 1.4;
}
.p-title {
  color: #101010;
  font-size: 20px;
  margin-top: 10px;
  text-align: center;
}
.p-text {
  color: #727272;
}
.p-btn-wrap {
  vertical-align: center;
  align-items: center;
  justify-content: space-between;
}
.m-shop {
  display: flex;
  .m-shop__left {
    flex: 1 1 60%;
  }
  .m-shop__right {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      white-space: nowrap;
    }
  }
  .m-shop__img {
    width: 65px;
    height: 65px;
    overflow: hidden;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
.m-banner {
  width: 355px;
  height: 122px;
  margin: 10px auto;
  overflow: hidden;
  border-radius: 3px;
  img {
    width: 100%;
    height: 100%;
  }
}
.m-card__title {
  color: #101010;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.m-icon-list {
  width: 355px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .m-icon__item {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      height: 70px;
      width: 70px;
    }
  }
}
</style>
